import React, {useState} from 'react';
import Login from './components/Login';
import Register from './components/Register';
import './App.css';

const App: React.FC = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const [role, setRole] = useState('');
  const [showLogin, setShowLogin] = useState(true);

  return (
      <div className="App">
        <header className="App-header">
          <h1>Blog System</h1>
          {!isLoggedIn ? (
              <>
                {showLogin ? (
                    <Login setIsLoggedIn={setIsLoggedIn} setRole={setRole} />
                ) : (
                    <Register setIsLoggedIn={setIsLoggedIn} setRole={setRole} />
                )}
                <button onClick={() => setShowLogin(!showLogin)}>
                  {showLogin ? 'Go to Registration' : 'Go to Login'}
                </button>
              </>
          ) : (
              <div>
                <h2>Welcome, {role}!</h2>
                <button onClick={() => {
                  setIsLoggedIn(false);
                  setRole('');
                  localStorage.removeItem('token');
                  localStorage.removeItem('role');
                }}>
                  Logout
                </button>
              </div>
          )}
        </header>
      </div>
  );
};

export default App;